<template>
  <div class="page-container">
    <el-card class="content-container">
      <div class="toolbar">
        <div class="toolbar-left">
          <h3>系统配置</h3>
        </div>
      </div>

      <!-- 配置表单 -->
      <el-form :model="configForm" label-width="120px" class="config-form">
        <el-form-item label="网站名称">
          <el-input v-model="configForm.siteName" placeholder="请输入网站名称" />
        </el-form-item>
        
        <el-form-item label="网站描述">
          <el-input 
            v-model="configForm.siteDescription" 
            type="textarea" 
            :rows="3"
            placeholder="请输入网站描述" 
          />
        </el-form-item>
        
        <el-form-item label="联系电话">
          <el-input v-model="configForm.contactPhone" placeholder="请输入联系电话" />
        </el-form-item>
        
        <el-form-item label="联系邮箱">
          <el-input v-model="configForm.contactEmail" placeholder="请输入联系邮箱" />
        </el-form-item>
        
        <el-form-item label="公司地址">
          <el-input v-model="configForm.companyAddress" placeholder="请输入公司地址" />
        </el-form-item>
        
        <el-form-item label="备案号">
          <el-input v-model="configForm.icp" placeholder="请输入备案号" />
        </el-form-item>
        
        <el-form-item label="版权信息">
          <el-input v-model="configForm.copyright" placeholder="请输入版权信息" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSave" :loading="saving">
            保存配置
          </el-button>
          <el-button @click="handleReset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const saving = ref(false)

const configForm = reactive({
  siteName: '农产品销售平台',
  siteDescription: '专业的农产品在线销售平台，为您提供新鲜、优质的农产品',
  contactPhone: '400-123-4567',
  contactEmail: 'contact@agricultural-platform.com',
  companyAddress: '北京市朝阳区农业科技园区',
  icp: '京ICP备12345678号',
  copyright: '© 2024 农产品销售平台 版权所有'
})

// 备份原始数据
const originalConfig = { ...configForm }

// 方法
const handleSave = () => {
  saving.value = true
  
  // 模拟API调用
  setTimeout(() => {
    ElMessage.success('配置保存成功')
    saving.value = false
    // 更新备份数据
    Object.assign(originalConfig, configForm)
  }, 1000)
}

const handleReset = () => {
  Object.assign(configForm, originalConfig)
  ElMessage.info('已重置为上次保存的配置')
}

const loadConfig = () => {
  // 模拟从API加载配置
  console.log('加载系统配置')
}

// 生命周期
onMounted(() => {
  loadConfig()
})
</script>

<style lang="scss" scoped>
@import '@/styles/index.scss';

.config-form {
  max-width: 600px;
  padding: 20px;
}
</style>
